<template>
	<!-- 客户列表 -->
	<div class="app-container">
		<!-- 使用搜索组件 -->
		<searchOption id="searchForm" ref="searchUnit" type="custom" :total="total" :status="queryParams.status"
			:isDelete="queryParams.isDelete" @searchList="parentSearchList" @handleExport="handleExport"
			@handleImport="handleImport"></searchOption>

		<vxe-table border ref="xTable" size="mini" show-overflow :data="infoList" :column-config="{ resizable: false }"
			:cell-style="cellStyle" :row-style="rowStyle" :menu-config="tableMenu" @menu-click="contextMenuClickEvent"
			:edit-config="{ trigger: 'click', mode: 'cell' }" @edit-actived="editActivedEvent" @scroll="srcollFn"
			width="1200px" :height="autoTableHeight">

			<vxe-column field="id" title="id" :visible="false">
				<template #edit="{ row }">
					<span>{{ row.id }}</span>
				</template>
			</vxe-column>

			<vxe-column field="sendDataTime" title="发送时间" :edit-render="{ autofocus: '.vxe-input--inner' }" width="125"
				:visible="queryParams.status == 0" :formatter="formatDate">
				<template #edit="{ row }">
					<vxe-input v-model="row.sendDataTime" type="datetime" placeholder="请选择日期" width="130" transfer
						@change="nameChangeEvent({ row })"></vxe-input>
				</template>
			</vxe-column>

			<!-- 已成交列表使用的列 -->
			<vxe-column field="successTime" width="125" title="成交时间" :visible="queryParams.status == 1">
				<template #edit="{ row }">
					<vxe-input v-model="row.successTime" type="date"></vxe-input>
				</template>
			</vxe-column>

			<vxe-column field="customManager" title="销售经理" :edit-render="{ autofocus: '.vxe-input--inner' }" width="80"
				v-if="topManagerFlag">
				<template #edit="{ row }">
					<vxe-input v-model="row.customManager" type="text" placeholder="请输入销售经理" @blur="nameChangeEvent({ row })">
					</vxe-input>
				</template>
			</vxe-column>

			<vxe-column field="callName" title="姓名" :edit-render="{ autofocus: '.vxe-input--inner' }" width="65">
				<template #edit="{ row }">
					<vxe-input v-model="row.callName" type="text" placeholder="请输入昵称" @blur="nameChangeEvent({ row })">
					</vxe-input>
				</template>
			</vxe-column>

			<vxe-column field="callPhone" title="电话" :edit-render="{ autofocus: '.vxe-input--inner' }" width="120">
				<template #edit="{ row }">
					<vxe-input v-model="row.callPhone" type="text" @blur="nameChangeEvent({ row }, 'phone')"></vxe-input>
				</template>
			</vxe-column>

			<vxe-column field="source" title="渠道" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
				<template #edit="{ row }">
					<!-- <vxe-input v-model="row.source" type="text" placeholder="请输入渠道" @blur="nameChangeEvent({ row })"></vxe-input> -->
					<vxe-select v-model="row.source" placeholder="请选择渠道" @change="nameChangeEvent({ row })">
						<vxe-option v-for="item in dict.type.custom_source" :key="item.label" :label="item.label"
							:value="item.label">
						</vxe-option>
					</vxe-select>
				</template>
			</vxe-column>

			<vxe-column field="introducer" title="介绍人" width="90" :edit-render="{ autofocus: '.vxe-input--inner' }">
				<template #edit="{ row }">
					<vxe-select filterable :filter-method="customFilterMethod" v-model="row.introducer"
						:options="introducerOptions_copy" placeholder="请选择介绍人" :ref="`select${row.id}`"
						@focus="getIntroducerOptionsFc(row.customManager)" :disabled="row.disabled">
						<template #option="{ option }">
							<vxe-radio-group v-model="row.introducer" @change="nameChangeEvent({ row })">
								<vxe-radio :label="option.custom_name" :content="option.custom_name"
									v-if="option.custom_name && option.custom_name != ''"></vxe-radio>
								<vxe-radio :label="option.call_phone" :content="option.call_phone"
									v-if="option.call_phone && option.call_phone != ''"></vxe-radio>
								<vxe-radio :label="option.call_name" :content="option.call_name"
									v-if="option.call_name && option.call_name != ''"></vxe-radio>
							</vxe-radio-group>
						</template>
					</vxe-select>
				</template>
			</vxe-column>

			<vxe-column field="quotation" title="报价金额" width="80" :edit-render="{ autofocus: '.vxe-input--inner' }">
				<template #edit="{ row }">
					<vxe-input v-model.number="row.quotation" type="text" placeholder="报价金额"
						@blur="nameChangeEvent({ row })"></vxe-input>
				</template>
			</vxe-column>

			<vxe-column title="服务项目" width="70" :visible="queryParams.status == 1">
				<template #default="{ row }">
					<el-popover placement="bottom" width="50%" title="服务项目" trigger="hover" content="111111"
						transition="fade-in-linear" @show="showServiceItems(row.contractId)">
						<span slot="reference" style="color: #1890ff;">服务项目</span>
						<div style="padding: 0px;">
							<span style="white-space: pre-line" v-html="ServiceItemText"></span>
						</div>
					</el-popover>
				</template>
			</vxe-column>

			<vxe-column field="lastRemark" title="回访记录">
				<template #edit="{ row }">
					<vxe-input v-model="row.lastRemark" type="text" placeholder="回访记录"></vxe-input>
				</template>
			</vxe-column>

			<!-- <vxe-column field="" title="添加回访" width="70">
				<template #default="{ row }">
					<el-button @click="handleUpdate(row)" type="text">添加回访</el-button>
				</template>
			</vxe-column>

			<vxe-column field="" title="历史回访" width="70">
				<template #default="{ row }">
					<el-button @click="talkBackHistory(row)" type="text">历史回访</el-button>
				</template>
			</vxe-column> -->

			<vxe-column field="customName" title="公司名称" width="170" :edit-render="{ autofocus: '.vxe-input--inner' }">
				<template #edit="{ row }">
					<span v-if="queryParams.status == 1">{{ row.customName }}</span>
					<vxe-input v-else-if="queryParams.status == 0" v-model="row.customName" type="text" placeholder="请输入公司名称"
						@blur="nameChangeEvent({ row })"></vxe-input>
				</template>
			</vxe-column>
			<!-- 客户列表操作菜单 -->
			<!-- <vxe-column title="操作" width="80" :visible="!queryParams.isDelete && queryParams.status == 0">
				<template #default="{ row }">
					<el-dropdown @command="handleCommand($event, row)">
						<span class="el-dropdown-link">
							操作选项<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">添加回访</el-dropdown-item>
							<el-dropdown-item divided command="2">历史回访</el-dropdown-item>
							<el-dropdown-item divided command="3" :disabled="row.status == 1">生成合同</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</vxe-column> -->
			<vxe-column title="操作" :width="queryParams.status == 0 ? '180' : '230'" v-if="!queryParams.isDelete">
				<template #default="{ row }">
					<el-button size="mini" type="text" @click="handleUpdate(row, 6)">添加回访</el-button>
					<el-button size="mini" type="text" @click="talkBackHistory(row)">历史回访</el-button>
					<el-button size="mini" type="text" @click="createContract(row)"
						:disabled="row.status == 1 && queryParams.status !== 1">生成合同</el-button>
					<el-button size="mini" type="text" @click="openHistoryContract(row)"
						v-if="queryParams.status == 1">历史合同</el-button>
				</template>
			</vxe-column>

			<!-- 已成交列表操作菜单 -->
			<!-- <vxe-column title="操作" width="80" :visible="!queryParams.isDelete && queryParams.status == 1">
				<template #default="{ row }">
					<el-dropdown @command="handleCommands($event, row)">
						<span class="el-dropdown-link">
							操作选项<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">添加回访</el-dropdown-item>
							<el-dropdown-item divided command="2">历史回访</el-dropdown-item>
							<el-dropdown-item command="3">生成合同</el-dropdown-item>
							<el-dropdown-item divided command="4">历史合同</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</vxe-column> -->
		</vxe-table>
		<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" /> -->
		<!-- 添加回访记录 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :before-close="cancel">
			<el-form ref="formRemark" :model="formRemark" :rules="rules" label-width="80px">
				<el-form-item label="回访记录" prop="remark">
					<el-input v-model="formRemark.remark" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="addRemark">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 回访记录 -->
		<el-dialog title="回访记录" :visible.sync="openRecord" width="70%" append-to-body>
			<vxe-table border ref="xTables" size="mini" show-overflow :data="remarkList" :column-config="{ resizable: false }"
				:edit-config="{ trigger: 'click', mode: 'cell' }" width="1200px" height="400px">
				<vxe-column field="remark" title="回访记录">
					<template #default="{ row }"> {{ row.remark }}</template>
				</vxe-column>
				<vxe-column field="gmtCreate" title="创建时间">
					<template #default="{ row }">
						<span>{{ parseTime(row.gmtCreate, "{y}-{m}-{d}") }}</span>
					</template>
				</vxe-column>
			</vxe-table>
		</el-dialog>
		<!-- 上传 -->
		<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
			<el-upload class="upload-demo" ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
				:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
				:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip text-center" slot="tip">
					<span>仅允许导入xls、xlsx格式文件。</span>
				</div>
			</el-upload>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFileForm">确 定</el-button>
				<el-button @click="upload.open = false">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 添加或修改续费合同信息对话框 -->
		<el-dialog title="生成合同" :visible.sync="openContract" width="60%" append-to-body :close-on-click-modal="false">
			<contract-dia ref="contractDiaRef" @closeDialog="cancelContract" :rowObj="rowObj"></contract-dia>
		</el-dialog>
		<!-- 插入弹层 -->
		<el-dialog title="插入数据" :visible.sync="insertDataModal" width="400px" append-to-body @close="insertDataModalClose">
			<div style="display: flex;">
				<el-row>
					<el-col :span="8">
						<span style="vertical-align: sub">插入行数：</span>
					</el-col>
					<el-col :span="16">
						<el-input-number v-model="insertNum" @change="handleChange" :min="1" :max="10"
							label="插入行数"></el-input-number>
					</el-col>
				</el-row>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insertDataModal = false">取 消</el-button>
				<el-button type="primary" @click="insertEvent">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 历史合同 -->
		<el-dialog title="历史合同" :visible.sync="openHistoryContractVis" width="60%" append-to-body>
			<history-contract ref="historyContractRef"></history-contract>
		</el-dialog>
	</div>
</template>

<script>
import {
	listInfo,
	getInfo,
	delInfo,
	addInfo,
	updateInfo,
	findCustom,
	applyToPublic,
} from "@/api/system/info";

import { listInfo as listInfo2, openPDF, serviceItems, } from "@/api/contract/info";
import { updateRemark, addRemark, listRemark } from "@/api/system/remark";
import ContractDia from "@/components/ContractDia";
import historyContract from "@/components/historyContract";
import { addDetail } from "@/api/system/detail";
import { pcaTextArr } from "element-china-area-data";
import { number } from "echarts";
import second from "@/components/Crontab/second.vue";
import XEUtils from "xe-utils";
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import { getToken } from "@/utils/auth";
import searchOption from "@/components/searchOption";
export default {
	components: {
		ContractDia,
		searchOption,
		historyContract
	},
	name: "Info",
	dicts: ["contract_type", "custom_source"],
	data() {
		return {
			requeryFlag: true,
			oldManager: '',//
			ServiceItemText: '',
			autoTableHeight: 750,
			scrollHeight: 0,
			pdfh5: null,
			// 插入行数
			insertNum: 1,
			insertDataModal: false, //插入弹层打开
			// 是否显示导入导出，仅有销售主管可显示
			topManagerFlag: false,
			pcaTextArr,
			selectedOptions: [],
			remarkId: "",
			formRemark: {},
			openRecord: false,
			openContract: false,
			//当前dia 行数据
			rowObj: {},
			// 历史合同
			historyContractTable: [],
			//
			openHistoryContractVis: false,
			pdfDialog: {
				show: false,
				title: "",
			},
			remarkList: [],
			tableMenu: {},
			loading: true,
			// 用户导入参数
			upload: {
				// 是否显示弹出层（用户导入）
				open: false,
				// 弹出层标题（用户导入）
				title: "",
				// 是否禁用上传
				isUploading: false,
				// 是否更新已经存在的用户数据
				// updateSupport: 0,
				// 设置上传的请求头部
				headers: { Authorization: "Bearer " + getToken() },
				// 上传的地址
				url: process.env.VUE_APP_BASE_API + "/custom/unDealInfo/upload",
			},
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 客户信息表格数据
			infoList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			callPhone: "",
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 30,
				isDelete: 0,
				customName: null,
				source: null,
				province: null,
				city: null,
				region: null,
				adressDetail: null,
				bussLicenseImage: null,
				bussLicenseImageMinor: null,
				legalIdCardFront: null,
				legalIdCardBack: null,
				callPhone: null,
				callName: null,
				customManager: null,
				gmtCreate: null,
				successTime: null,
				status: 0,
				degree: null,
			},
			breadList: [], //初始化
			// 表单校验
			rules: {},

			rowId: "",
			introducerOptions: [],
			introducerOptions_copy: [],
			// 操作菜单
			showPull: false,
			searchName: "",
		};
	},
	created() {
		// 检查登录账户是否为销售主管，如果不是则不显示导入导出
		let roles = this.$store.state.user.roles;
		if (roles.length > 0) {
			roles.forEach(item => {
				if (item == 'topManager' || item == 'admin') {
					this.topManagerFlag = true;
					return
				}
			});
		}
	},
	computed: {
		second() {
			return second;
		},
	},
	mounted() {
		this.$nextTick(() => {
			// 视口高度 - 列表上方的元素高度
			let allHeight = window.innerHeight;
			let element = [
				document.getElementById('navbar'),
				document.getElementById('searchForm'),
				document.getElementById('tags-view-container'),
			]
			let domHeight = element.map(item => item.offsetHeight)
			// let tableHeight = allHeight - 50 - 34 - 50 - 36;
			let tableHeight = allHeight - 40 - domHeight[0] - domHeight[1] - domHeight[2];
			this.autoTableHeight = tableHeight;
		})
		// console.log(this.dict);
	},
	watch: {
		// 监听路由对象中的变化
		'$route': {
			handler: function (from, to) {
				// 当路由发生变化时会调用这个函数
				this.infoList = [];
				this.queryParams.pageNum = 1;
				this.queryParams.pageSize = 30;
				this.queryParams.customName = null;
				this.queryParams.source = null;
				this.queryParams.province = null;
				this.queryParams.city = null;
				this.queryParams.region = null;
				this.queryParams.adressDetail = null;
				this.queryParams.bussLicenseImage = null;
				this.queryParams.bussLicenseImageMinor = null;
				this.queryParams.legalIdCardFront = null;
				this.queryParams.legalIdCardBack = null;
				this.queryParams.callPhone = null;
				this.queryParams.callName = null;
				this.queryParams.customManager = null;
				this.tableMenu = {};
				this.queryParams.status = from.query.status;
				this.queryParams.isDelete = from.query.isDelete;
				// 只有客户列表有右键菜单
				if (from.query.status == '0' && !from.query.isDelete) {
					this.tableMenu = {
						body: {
							options: [
								[
									{
										code: "insertAt",
										name: "插入",
										disabled: false,
									},
									{
										code: "keyIs",
										name: "红色",
										disabled: false,
									},
									{
										code: "cancelKeyIs",
										name: "黄色",
										disabled: false,
									},
									{
										code: "cancel",
										name: "取消",
										disabled: false,
									},
									{
										code: "applyToPublicCode",
										name: "申请公海",
										disabled: false,
									},
									{
										code: "remove",
										name: "删除",
										disabled: false,
									},
								],
							],
						},
					}
				}
				this.getList();
			},
			// 如果需要在路由变化时立即响应，可以设置immediate为true
			immediate: true
		}
	},
	methods: {
		// 介绍人单元格，如果渠道非“转介绍”则禁止编辑
		editActivedEvent({ rowIndex, row }) {
			if (row.source == '转介绍') {
				row.disabled = false;
			} else {
				row.disabled = true;
			}
		},
		// 格式化时间
		formatDate(date) {
			let cellValue = date.cellValue;
			if (date.cellValue.split(':')[2]) {
				return date.cellValue.substring(1, 16)
			} else {
				return date.cellValue
			}
		},
		// 子组件触发搜索
		parentSearchList(data) {
			this.scrollHeight = 0;
			this.queryParams.source = data.source;
			this.queryParams.pageNum = data.pageNum;
			this.queryParams.pageSize = data.pageSize;
			this.queryParams.callName = data.callName;
			this.queryParams.callPhone = data.callPhone;
			this.queryParams.customName = data.customName;
			this.queryParams.customManager = data.customManager;
			this.handleQuery();
		},
		// 查看服务项目
		showServiceItems(id) {
			this.ServiceItemText = '';
			serviceItems(id).then((response) => {
				this.ServiceItemText = response.data.amountOrRemind;
			})
		},
		// 右键菜单响应
		contextMenuClickEvent({ menu, row, column }) {
			let xTable = this.$refs.xTable;
			switch (menu.code) {
				case "insertAt"://插入
					this.openInsertDialog(row);
					break;
				case "remove"://删除
					this.removeRow(row)
					break;
				case "keyIs"://红色
					this.keyIsFc(row, column, 3);
					break;
				case "cancelKeyIs"://黄色
					this.keyIsFc(row, column, 5);
					break;
				case "cancel"://取消
					this.keyIsFc(row, column, 0);
					break;
				case "applyToPublicCode"://申请公海
					this.applyToPublicFc(row, column, 0);
					break;
			}
		},
		delInfo(row) {
			delInfo(row.id).then((response) => {
				this.getList();
			});
		},
		//打开插入弹层
		openInsertDialog(row) {
			this.insertDataModal = true;
		},
		// 插入行数改变时触发
		handleChange(value) {
			if (!value || value == 0) {
				this.insertNum = 1;
			}
		},
		// 插入操作
		async insertEvent(row) {
			if (this.insertNum == '' || this.insertNum == 0) {
				this.msgError('请输入插入行数');
				return false;
			}
			if (this.insertNum > 10) {
				this.msgError('插入行数不能超过10行');
				return false;
			}
			const records = [];
			for (let i = 0; i < this.insertNum; i++) {
				const record = {
					callPhone: ``,
					callName: ``,
					customManager: this.$store.state.user.name || "待填写",
					degree: 0,
					status: `0`,
					source: ``,
					lastRemark: ``,
				};
				records.push(record);
			}
			await addInfo(records);
			this.getList();
			this.$refs.xTable.clearScroll();
			this.insertDataModal = false;
		},
		// 插入弹层关闭时，插入行数恢复默认值
		insertDataModalClose() {
			this.insertNum = 1;
		},
		//关键客户
		keyIsFc(row, column, num) {
			let form = row;
			form.keyIs = num;
			updateInfo(form).then((response) => {
				//this.getList();
			});
		},
		// 文件上传中处理
		handleFileUploadProgress(event, file, fileList) {
			this.upload.isUploading = true;
		},
		// 文件上传成功处理
		handleFileSuccess(response, file, fileList) {
			this.upload.open = false;
			this.upload.isUploading = false;
			this.$refs.upload.clearFiles();
			this.$alert(
				"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
				"导入成功" +
				"</div>",
				"导入结果",
				{ dangerouslyUseHTMLString: true }
			);
			this.getList();
		},
		// 提交上传文件
		submitFileForm() {
			this.$refs.upload.submit();
		},
		// 行背景颜色
		rowStyle({ row }) {
			// 已成交
			if (row.status == 1) {
				return {
					backgroundColor: "#FF9192",
					// color: "#ffffff",
				};
			} else {
				return {
					backgroundColor: "#9EDBF7",
				};
			}

		},
		// 列背景颜色
		cellStyle({ row, column }) {
			if (column.field === "callName") {
				// 红色  自定义红色标记
				if (row.keyIs == 3) {//|| row.degree == 1
					return {
						backgroundColor: "#FF9192 !important",
						// color: "#ffffff",
					};
				}
				// 紫色 公海
				if (row.status == 5) {//
					return {
						backgroundColor: "#A66CF1 !important",
						// color: "#ffffff",
					};
				}
				//黄色  自定义黄色标记
				if (row.keyIs == 5) {
					return {
						backgroundColor: "#FEE765 !important",
						// color: "#ffffff",
					};
				}
			}
		},
		/** 查询客户信息列表 */
		getList() {
			// 1.记录滚动条位置
			// let { scrollTop } = this.$refs.xTable.getScroll()
			// this.scrollHeight = scrollTop;
			this.loading = true;
			this.queryParams.pageNum = 1;
			listInfo(this.queryParams).then((response) => {
				this.infoList = response.rows;
				this.total = response.total;
				this.loading = false;
				// 4.还原滚动条位置
				this.$nextTick(() => {
					//this.$refs.xTable.scrollTo(0, this.scrollHeight)
				})
			});
		},
		// 单元格修改
		nameChangeEvent({ row }, type) {
			let form = row;
			// if (type == 'phone' && form.callPhone != "" && form.callPhone != null) {
			// 	// 需要验证手机号
			// 	if (!/^1[3456789]\d{9}$/.test(form.callPhone)) {
			// 		this.$modal.msgError("请填写正确的手机号");
			// 		// row.callPhone = ''
			// 		return false;
			// 	}
			// }
			updateInfo(form).then((response) => {
				//this.getList();
			});
		},

		// 对话框取消按钮
		cancel() {
			this.open = false;
			this.form = {
				paidAmount: "",
				customId: 0,
				paymentReason: "",
				contractId: 0,
				paymentType: "",
				mainName: "",
			};
		},
		// 生成合同对话框取消按钮
		cancelContract() {
			this.openContract = false;
			this.$refs.contractDiaRef.reset();
			this.getList();
		},
		//历史回访
		talkBackHistory(row) {
			this.openRecord = true;
			let customId = row.id;
			let queryParams = {
				pageNum: 1,
				pageSize: 30,
			};
			if (customId) {
				queryParams.customId = customId;
			}
			listRemark(queryParams).then((response) => {
				this.remarkList = response.rows;
			});
		},
		//生成合同
		createContract(row) {
			if (row.source === "暂无" || row.source === "") {
				this.$modal.msgError("请填写渠道信息");
				return;
			}
			this.openContract = true;
			this.rowObj = row;
			this.rowObj.isNew = true;
			// 第一次生成合同的标识
			this.rowObj.firstGeneration = true;
			this.rowId = row.id;
			this.$nextTick(() => {
				this.$refs.contractDiaRef.reset();
			});
		},

		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.$refs.searchUnit.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 删除行
		removeRow(row) {
			this.$modal
				.confirm('是否确认删除姓名为 “' + row.callName + '” 的数据？')
				.then(() => {
					// 调用删除
					let xTable = this.$refs.xTable;
					xTable.remove(row);
					this.delInfo(row);
				})
				.catch(() => {
					// 处理错误情况，比如可以显示一个错误消息
					// this.$modal.msgError("删除失败！");
				});
		},
		// 申请公海
		applyToPublicFc(row, column, num) {
			// 已成交客户不能转入公海
			let form = row;
			if (row.status == 1) {
				this.$modal.msgError("已成交客户不能申请公海！");
				return false;
			}
			this.$modal
				.confirm('是否确认添加编号为"' + row.id + '"加入公海？')
				.then(() => {
					// 调用函数，并返回 Promise
					return applyToPublic(row.id);
				})
				.then(() => {
					// 刷新列表
					// this.getList();
					row.status = 5;
					// 显示成功消息
					this.$modal.msgSuccess("申请成功");
				})
				.catch(() => {
					// 处理错误情况，比如可以显示一个错误消息
					this.$modal.msgError("申请失败！");
				})
		},

		/**
		 * 客户列表操作菜单被点击时
		 *
		 */
		handleCommand(e, row) {
			if (e === '1') {
				this.handleUpdate(row)
			} else if (e === '2') {
				this.talkBackHistory(row)
			} else {
				this.createContract(row)
			}
		},
		/** 添加回访 */
		handleUpdate(row) {
			this.formRemark = {};
			this.remarkId = row.id;
			this.formRemark.row = row;
			const id = row.id || this.ids;
			this.open = true;
			this.title = "添加回访记录";
			// getInfo(id).then((response) => {
			// 	this.form = response.data;

			// });
		},
		// 提交回访
		addRemark() {
			this.formRemark.customId = this.remarkId;
			// 获取当前行数据，并删除该字段
			let remarkRow = this.formRemark.row;
			delete this.formRemark['row']
			// 提交回访
			addRemark(this.formRemark).then((response) => {
				this.open = false;
				// 本地更新回访数据
				let xTable = this.$refs.xTable;
				let index = xTable.getRowIndex(remarkRow)
				let rowData = this.infoList[index];
				rowData.lastRemark = this.formRemark.remark;
				xTable.updateData(rowData)
				// this.getList();
			});
		},
		/** 导出按钮操作 */
		handleExport(data) {
			this.queryParams = data;
			this.download(
				"custom/info/export",
				{
					...this.queryParams,
				},
				`info_${new Date().getTime()}.xlsx`
			);
		},
		/** 导入按钮操作 */
		handleImport() {
			this.upload.title = "用户导入";
			this.upload.open = true;
		},
		// 滚动加载
		srcollFn(e) {
			let circulateNum = this.total / 30;
			let bottomOffset = e.scrollHeight - e.scrollTop - e.bodyHeight;
			if (bottomOffset < 50 && this.queryParams.pageNum < circulateNum) {
				if (this.requeryFlag) {
					this.loading = true;
					this.queryParams.pageNum++;
					this.requeryFlag = false;
					listInfo(this.queryParams).then((response) => {
						this.infoList = [...this.infoList, ...response.rows];
						// this.total = response.total;
						this.loading = false;
						this.requeryFlag = true;
					});
				}
			}
		},
		// 介绍人自定义搜索方法
		customFilterMethod(e) {
			if (e.searchValue == '') {
				return true
			} else {
				e.option.custom_name = e.option.custom_name ? e.option.custom_name : ''
				e.option.call_phone = e.option.call_phone ? e.option.call_phone : ''
				e.option.call_name = e.option.call_name ? e.option.call_name : ''
				return e.option.custom_name.indexOf(e.searchValue) > -1
					|| e.option.call_phone.indexOf(e.searchValue) > -1
					|| e.option.call_name.indexOf(e.searchValue) > -1
			}
		},
		//select得到焦点 获取介绍人下拉
		getIntroducerOptionsFc(name) {
			console.log(name);
			this.introducerOptions_copy = [];
			if (name !== undefined) {
				if (this.oldManager == name) { // 介绍人下拉框的值没有改变，无需重复请求
					//先向下拉数据内赋值50条，等待1000ms后赋值全部，解决下拉数据较多时，下拉框打开贼慢的问题
					this.introducerOptions_copy = this.introducerOptions.slice(0, 100);
					setTimeout(() => {
						this.introducerOptions_copy = this.introducerOptions_copy.concat(this.introducerOptions.slice(100))
					}, 1500);
					return
				}
				this.oldManager = name;
				this.introducerOptions = [];
				findCustom(name).then((response) => {
					this.introducerOptions = response.rows;
					this.introducerOptions_copy = response.rows.slice(0, 100);
					setTimeout(() => {
						this.introducerOptions_copy = this.introducerOptions_copy.concat(this.introducerOptions.slice(100))
					}, 1500);
				});
			}
		},
		/**
		* 已成交操作菜单被点击时
		*
		*/
		handleCommands(e, row) {
			if (e === '1') {
				// 添加回访
				this.handleUpdate(row)
			} else if (e === '2') {
				// 历史回访
				this.talkBackHistory(row)
			} else if (e === '3') {
				// 生成合同
				this.createContract(row)
			} else {
				// 历史合同
				this.openHistoryContract(row)
			}
		},
		//查看历史合同
		openHistoryContract(row) {
			this.openHistoryContractVis = true;
			this.$nextTick(() => {
				this.$refs.historyContractRef.getHistoryContract(row.id);
			})
			// listInfo2({ customId: row.id }).then((response) => {
			// 	this.historyContractTable = response.rows;
			// });
		},
	},
};
</script>

<style scoped>
.el-row {
	margin-bottom: 20px;
}

.newTree /deep/ .el-tree-node__content {
	height: 40px !important;
}

.newdialog .el-row {
	margin-bottom: 0px !important;
}

.width18 {
	width: 180px;
	margin-top: 4px;
}

.notesClass {
	width: 180px;
	margin-left: 10px;
	margin-top: 4px;
}

.my-dropdown1 {
	height: 200px;
	overflow: auto;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	background-color: #fff;
}

.list-item1:hover {
	background-color: #f5f7fa;
}

/* .el-input--medium  .el-input__inner{
  background: none !important;
  border: none !important;
  color: #1890ff;
  font-size: 10px;
  padding-left: 0;
}
.el-icon-arrow-up:before{
  color: #1890ff
} */
.upload-demo /deep/ .el-upload {
	width: 100% !important;
}
</style>